<template>
  <view class="page-content">
    <view class="search-box">
      <custom-input
        placeholder="搜索"
        background="#FFFFFF"
        :text="filterParmas.searchValue"
        @handleSearch="handleSearch"
      ></custom-input>
    </view>
    <view class="sort-box">
      <view style="flex: 1">
        <sort-tab
          sortText="价格排序"
          @sortChanged="sortPriceChanged"
        ></sort-tab>
      </view>
      <view style="flex: 1">
        <sort-tab
          sortText="距离排序"
          @sortChanged="sortDistanceChanged"
        ></sort-tab>
      </view>
    </view>

    <scroll-view
      scroll-y="true"
      style="flex: 1; overflow: hidden"
      @scrolltolower="addRandomData"
      :refresher-enabled="true"
      @refresherrefresh="handlerefresh"
      :refresher-triggered="showrefresh"
      :show-scrollbar="false"
    >
      <template v-if="dataList.length === 0 && status === 'nomore'">
        <empty></empty>
      </template>
      <template v-else>
        <view class="cards-list">
          <view
            class="mt-16"
            v-for="(item, index) in dataList"
            @click="handleToDetail(item.id)"
            :key="index"
          >
            <baomu-card :data="item"></baomu-card>
          </view>
          <u-loadmore :status="status" />
        </view>
      </template>
    </scroll-view>
    <view class="add-btn"
      ><add-btn
        link="/pages/index/pet-baomu/add-pet-baomu/add-pet-baomu"
      ></add-btn
    ></view>
  </view>
</template>

<script>
	import baomuCard from "../components/baomu-card.vue";
	import customInput from "components/common/custom-input.vue";
	import sortTab from "components/index/cmbz/sort-tab.vue";
	import addBtn from "components/index/add-fixed-btn.vue";
	import empty from "components/common/empty/empty.vue";
	import petBaomu from "../../../../api/petBaomu.js";
	import utils from "../../../../utils/util.js";
	export default {
		data() {
			return {
				status: "loadmore",
				dataList: [], //数据列表
				filterParmas: {
					searchValue: "",
					nowLat: 0,
					nowLng: 0,
					sortOrder: "",
					sort: "",
					pageNum: 0,
					pageSize: this.$config.pageSize,
				}, //筛选参数
				showrefresh: false,
			};
		},
		onShow() {
			this.dataList = [];
			if (this.filterParmas.nowLat && this.filterParmas.nowLng) {
				this.getDataList();
			} else {
				utils
					.getLocationInfo()
					.then((res) => {
						this.filterParmas.nowLat = res.latitude;
						this.filterParmas.nowLng = res.longitude;
						this.getDataList();
					})
					.catch((err) => {
						this.getDataList();
					});
			}
		},
		methods: {
			addRandomData() {
				if (this.status === "loadmore") this.getDataList();
			},
			sortPriceChanged(value) {
				this.filterParmas.sortOrder = value;
				this.filterParmas.sort = "price";
				this.dataList = [];
				this.getDataList();
			},
			sortDistanceChanged(value) {
				this.filterParmas.sortOrder = value;
				this.filterParmas.sort = "distance";
				this.dataList = [];
				this.getDataList();
			},
			getDataList() {
				if (this.status !== "loading") {
					this.status = "loading";
					this.filterParmas.pageNum++;
					petBaomu
						.getPetBaomuList(this.filterParmas)
						.then((res) => {
							if (res.code === 200) {
								this.dataList.push(...res.rows);
								if (res.rows?.length < this.$config.pageSize)
									this.status = "nomore";
								else {
									this.status = "loadmore";
								}
								this.showrefresh = false;
							} else {
								throw Error();
							}
						})
						.catch((err) => {
							this.status = "nomore";
							this.showrefresh = false;
							console.log(err);
						});
				}
			},
			handleToDetail(id) {
				uni.navigateTo({
					url: "/pages/index/pet-baomu/baomu-detail/baomu-detail?id=" + id,
				});
			},
			handleSearch(val) {
				this.filterParmas.searchValue = val;
				this.filterParmas.pageNum = 0;
				this.dataList = [];
				this.getDataList();
			},
			handlerefresh() {
				this.showrefresh = true;
				this.dataList = [];
				this.filterParmas.pageNum = 0;
				this.getDataList();
			},
		},
		components: {
			baomuCard,
			customInput,
			sortTab,
			addBtn,
			empty,
		},
	};
</script>

<style lang="scss" scoped>
.page-content {
  height: 100%;
  background-color: #f6f6f6;
  padding: 0 32rpx;
  display: flex;
  flex-direction: column;
  position: relative;

  .search-box {
    padding: 16rpx 0 24rpx 0;
  }

  .sort-box {
    display: flex;
    justify-content: cneter;
    align-items: center;
    margin-bottom: 24rpx;
  }

  .cards-list {
    position: relative;

    .mt-16 {
      &:first-child {
        margin-top: 0;
      }
    }
  }

  .add-btn {
    position: absolute;
    bottom: 218rpx;
    right: 32rpx;
  }
}
</style>